<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      // 考虑兼容性
      function createXHR() {
        var xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else {
          xhr = new ActiveXObjext('Microsoft.XMLHttp');
        }
        return xhr;
      }
      //第一步：创建XMLHttpReques对象
      var ajax = createXHR();

      // // 不考虑兼容性
      // var ajax = new XMLHttpRequest();

      //第二步：创建请求 创建链接
      // ajax.open("get", "http://localhost:8000", true);//open发送数据必须是GET请求
      // ajax.open('get', 'http://localhost:8000?username=小红&info=1111', true);
      ajax.open("get", "https://cnodejs.org/api/v1/topics", true);
      // ajax.open("get", "https://cnodejs.org/api/v1/topics?page=2&limit=10", true);
      
      //第三步：接受响应执行回调函数——当状态改变时自动触发该函数
             ajax.onreadystatechange = function () {
            console.log(ajax.readyState);
            if (ajax.readyState == 4 && ajax.status == 200) { //接受数据成功条件
                var txt = ajax.responseText;
                console.log(typeof txt,txt);
                // var data = JSON.parse(txt); //json数据解析为js对象
                //console.log(typeof data);

                //其他DOM操作
            }
        }

      //第四步：发送请求
      ajax.send(null);
      //ajax.send("key1=value1&key2=value2");//POST请求通过send发送数据，GET请求在URL上体现数据
    </script>
  </body>
</html>
